import React, { Component } from 'react'

import {
    Layout
} from '../../components'
import {
    getDetailInfo
} from '../../apis/home'
import { Toast, Carousel, NoticeBar } from 'antd-mobile'
import './home.less'

class HomeDetail extends Component {

    constructor() {
        super()
        this.state = {
            detail: {photo: []},
            buyInfo: [],
            singleInfo: ''
        }
    }

    async componentDidMount() {
        Toast.loading()
        let result = await getDetailInfo(this.props.match.params.id)
        Toast.hide()
        this.setState({
            detail: result.code === 200 ? result.data.detail : {},
            buyInfo: result.code === 200 ? result.data.carouselList : {}
        }, () => {
            this.loopBuyInfo(this.state.buyInfo.length - 1)
            
        })
    }

    /** 遍历购买消息 */
    loopBuyInfo(index) {
        let it = this.state.buyInfo[index]
        this.setState({
            singleInfo: it.nickName + '  ' + it.desc
        })
        setTimeout(() => {
            --index
            // 如果到最后一条，需要回滚到最前边一天
            if (index < 0) index = this.state.buyInfo.length - 1
            this.loopBuyInfo(index)
        }, 1000)
    }

    render() {
        let imgHei = document.getElementById('root').getBoundingClientRect().width
        return (
            <div className="home-detail-container">
                <Carousel
                    autoplay={true}
                    infinite
                >
                    {
                        this.state.detail.photo.map(val => (
                            <img
                                src={val.url}
                                key={val.id}
                                alt=""
                                style={{ width: '100%', height: `${imgHei}px`, verticalAlign: 'top' }}
                            />
                        ))
                    }
                </Carousel>
                <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                    {this.state.singleInfo}
                </NoticeBar>

                <div className="home-detail-footer">

                </div>
            </div>
        )
    }
}
export default Layout(HomeDetail, {
    title: '商品详情'
})